<template>
  <!-- 公司动态 -->
  <section id="company-activities" class="company-activities">
    <h2 class="title1">公司动态</h2>
    <p class="intro">
      关注公司动态，第一时间获取一手消息
    </p>
    <!-- 动态容器 -->
    <div class="activities">
      <!-- 动态 -->
      <div class="activity" v-for="(item, index) in list" :key="index">
        <!-- 动态图片 -->
        <div class="act-image-wrapper">
          <img :src="item.icon" />
        </div>
        <!-- 动态元数据，包括发表日期和评论数量 -->
        <div class="meta">
          <!-- 发布日期 -->
          <p class="date-published">
            <i class="far fa-calendar"></i> {{ item.time }}
          </p>

          <p class="comments">
            <i class="far fa-comments"></i> {{ item.count }}条评论
          </p>
        </div>
        <!-- 动态标题 -->
        <h2 class="act-title">{{ item.title }}</h2>
        <!-- 动态内容摘要 -->
        <article>
          {{ item.content }}
        </article>
        <!-- 阅读更多按钮 -->
        <button class="readmore-btn">阅读更多</button>
      </div>
    </div>
  </section>
</template>

<script>
import mock from "@/mock/index.js";
export default {
  props: [],
  data() {
    return {
      list: []
    };
  },
  mounted() {
    this.list = mock.companydata();
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
@import "@/scss/section.scss";

/* ============= 公司动态 ================== */
/* 公司动态 */
.company-activities {
  margin-top: 88px;
  //   margin-bottom: 80px;
  //   padding-bottom: 80px;
  //   background: pink;
}

/* 动态栅格布局 */
.activities {
  display: grid;
  column-gap: 30px;

  grid-template-columns: repeat(3, 1fr);
}
/* 动态 */
.activity {
  padding: 24px;
  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.1);
  transition: 0.4s;
}

/* 动态图片容器 */
.act-image-wrapper {
  overflow: hidden;
  /* 抵消activity的padding */
  margin: -24px;
  margin-bottom: 0;
  height: 255px;
}

/* 动态图片 */
.act-image-wrapper img {
  min-height: 300px;
  width: 100%;
  //   background: red;

  object-fit: cover;
}

/* 动态元数据 */
.activity .meta {
  display: flex;
  margin-top: 20px;
  margin-bottom: 12px;
  color: $text-color-light-gray;
  font-size: 12px;
}

/* 评论 */
.activity .meta > p:last-child {
  margin-left: 36px;
}

/* 动态标题 */
.act-title {
  margin-bottom: 16px;
  color: $text-color-dark;
  font-size: 18px;
}

/* 动态摘要 */
.activity article {
  color: $text-color-gray;
  letter-spacing: 0.54px;
  line-height: 24px;
}

/* 阅读更多按钮 */
.readmore-btn {
  margin-top: 24px;
  padding: 6px 14px;
  border: 0;
  border-radius: 4px;
  background-color: $primary-color;
  color: white;
}

/* 动态鼠标移上时 */
.activity:hover {
  box-shadow: 0px 0px 36px rgba(0, 0, 0, 0.1);
  transform: translateY(-20px) scale(1.05);
}

// /* 小于768象素时 */
@media (max-width: 768px) {
  .activities {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 50px;
  }
}

// /* 小于576象素 */
@media (max-width: 576px) {
  .activities {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 50px;
  }
}
</style>
